<template>
  <div>
    <!--货代询价搜索-->
    <div style="padding: 20px; background-color: #f5f7fa; border-radius: 8px">
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item label="询价编码" style="margin-left: 10px">
              <el-input v-model="filters.inquiryCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click="initData"
              >搜索</el-button
            >
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 报价列表 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="index" label="行号" width="80" />
      <el-table-column prop="inquiryCode" label="报价编码" width="150" />
      <el-table-column prop="orderCode" label="货代" width="150" />
      <el-table-column prop="createTime" label="报价时间" width="200" />
      <el-table-column prop="createTime" label="默认报价" width="120" />

      <el-table-column prop="status" label="类型" width="120" />
      <el-table-column prop="createTime" label="备注" width="100" />
      <el-table-column label="操作" class="button-container">
        <el-space :size="0">
          <template v-slot="{ row }">
            <el-button text type="primary"> 报价详情 </el-button>
            <el-button text type="primary"> 确认订单 </el-button>
          </template>
        </el-space>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        :page-sizes="[1, 10, 20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
//引入图标
import { Edit } from "@element-plus/icons-vue";
// 引入消息组件
import { ElMessage } from "element-plus";
//引入路由
import { useRouter } from "vue-router";
//引入api
import { queryForwarderInquiry } from "@/api/forwarderInquiry";

//路由实例
const router = useRouter();
// 新增，编辑状态标识
const isEditing = ref(true);

//过滤条件
const filters = ref({
  inquiryCode: "",
  orderCode: "",
  status: ""
});
//重置
function reset() {
  filters.value = {
    inquiryCode: "",
    orderCode: "",
    status: ""
  };
  initData();
}
//路由跳转（增加货代询价）
function openAddInquiry() {
  isEditing.value = false;
  router.push("/forwarder/addInquiry");
}

const tableData = ref([]);
//查询数据 异步函数
async function initData(params) {
  let data = {
    pageNum: page.value,
    pageSize: pageSize.value,
    inquiryCode: filters.value.inquiryCode,
    orderCode: filters.value.orderCode,
    status: filters.value.status
  };
  //查询数据
  let res = await queryForwarderInquiry(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
  console.log(tableData.value);
}
//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  // console.log(pg);
  //更改当前页
  page.value = pg;
  console.log(page.value);
  //查询数据
  initData();
}

onMounted(() => {
  initData();
});
</script>

<style scoped>
.button-container {
  display: flex; /* 使用flex布局 */
  justify-content: start; /* 子元素从容器起始位置排列 */
  gap: 5px; /* 设置子元素之间的间距为5像素，可按需调整 */
}
</style>
